<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/linanjiang/css/me.css" th:href="@{/linanjiang/css/me.css}">
    <link rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://lib.baomitu.com/prettify/latest/prettify.css">
    <script rel="stylesheet" src="https://lib.baomitu.com/layer/3.1.1/mobile/layer.js"></script>
    <link rel="stylesheet" href="../static/css/mode.css">
    <style type="text/css">
        body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,'sans-serif';background: url(https://api.uomg.com/api/image.lofter?format=images); background-size: cover;}
        @font-face {font-family: 'webfont_2';
            src: url('//at.alicdn.com/t/webfont_bar76uyhrpd.eot'); /* IE9*/
            src: url('//at.alicdn.com/t/webfont_bar76uyhrpd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('//at.alicdn.com/t/webfont_bar76uyhrpd.woff') format('woff'), /* chrome、firefox */
            url('//at.alicdn.com/t/webfont_bar76uyhrpd.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('//at.alicdn.com/t/webfont_bar76uyhrpd.svg#思源黑体-极细') format('svg'); /* iOS 4.1- */
        }
        .text-center{text-align: center;}
        .text-white{color: #FFF;}
        .header,.footer{margin: 30px;color:#fff;}
        .title1{font-size: 20px;}
        .title2{font-size: 24px;font-family:"webfont_2" !important;}
        .jumbotron{margin: auto;text-align: center;background-color: rgba(255, 255, 255, .3);}
        .jumbotron input[type=file] {opacity:0;width:102px;height:31px;position:absolute;display:inline-block;}
        .preview {color: #fff;}
        .preview img {width: 755px!important;height: 300px !important;}
        .preview p {word-break: break-all;word-wrap: break-word;font-size: 13px !important;}
        .form-control:focus{background-color: rgba(255, 255, 255, .3);}
    </style>
</head>
<body>
<nav th:replace="_fragments :: menu(6)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">Blog</h2>
            <a href="#" class=" m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
            <a href="#" class=" m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
            <a href="#" class="active m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
            <div class="right m-item item m-mobile-hide">
                <div class="ui icon inverted transparent input m-margin-tb-tiny">
                    <input type="text" placeholder="Search....">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>
<div class="ui segment" style="background: url('linanjiang/images/bg.jpg')top center no-repeat fixed;margin: 0px" >
    <div class="ui container" style="border: none">
        <div class="ui center segment" style="width: 800px" id="content">
            <div class="center">
                <input type="hidden" name="img">
                <textarea class="comment" id="neiron"></textarea>
                <input id="img" type="file" accept="image/*" multiple style="opacity:0.01">
                <input type="button" value="发布" class="send">
                <div class="preview">
                    <hr>
                </div>
                <div class="ui segment" style="width: 760px;opacity: 95%;padding-bottom: 5px;background-color: floralwhite" th:each="item:${visitList}">
                    <span>
                        <img class="ui circular image" src="images/logo.jpg" width="50px;height：50px" style="float: left">
                        <span style="color: teal;margin-left:20px;">游客</span><br>
                        <span style="margin-left: 15px;margin-bottom: 20px"  th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm')}">2020.6.22</span>
                    </span><br>
                    <span name="content" style="border: none;margin-left: 20px;color: orange;font-size: 18px" readonly th:text="${item.content}">一年一度的宿舍节</span>
                    <img name="imageUrl" th:src="${item.imageUrl}" alt="配图" style="margin-left: 50px;margin-top:5px;width: 660px!important;height: 300px !important;" th:unless="${#lists.isEmpty(item.imageUrl)}">
                </div>
            </div>
        </div>
    </div>
</div>

<!--<script src="https://lib.baomitu.com/jquery/3.4.0/jquery.min.js" type="text/javascript"></script>-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="/js/l2dwidget.min.js"></script>
<script type="text/javascript">
    var url = 'https://api.uomg.com/api/image.ali';
    $(document).ready(function() {
        $("input[type='file']").change(function(e) {
            file_upload(this.files)
        });
        var obj = $('body');
        obj.on('dragenter', function(e) {
            e.stopPropagation();
            e.preventDefault()
        });
        obj.on('dragover', function(e) {
            e.stopPropagation();
            e.preventDefault()
        });
        obj.on('drop', function(e) {
            e.preventDefault();
            file_upload(e.originalEvent.dataTransfer.files)
        });
    });
    function file_upload(files){
        if (files.length == 0) return alert('请选择图片文件！');
        for(var j = 0,len = files.length; j < len; j++){
            console.log(files[j]);
            let imageData = new FormData();
            imageData.append("file", 'multipart');
            imageData.append("Filedata", files[j]);
            $.ajax({
                url: url,
                type: 'POST',
                data: imageData,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                // 图片上传成功
                success: function (result) {
                    if (result.code == 1){
                        $('input[name=img]').val(result.imgurl)
                        $('.preview').append('<div><img src="'+result.imgurl+'" style="width: 300px;height: 200px"></div>');
                    }else{
                        layer.msg('第'+j+'个图片上传失败');
                    }
                },
                // 图片上传失败
                error: function () {
                    console.log('图片上传失败');
                }
            });
        }
    }
    function url_upload(){
        var urls = $('#urls').val();
        if (urls == false) return alert('请输入图片链接！');
        var UrlArr = urls.split("\n");
        $('#url_upload_model').modal('hide');
        for(var j = 0,len = UrlArr.length; j < len; j++){
            console.log(UrlArr[j]);
            $.getJSON(url, {imgurl: UrlArr[j]}, function(result, textStatus) {
                if (result.code == 1){
                    $('.preview').append('<div><img src="'+result.imgurl+'" ><code class="title1">'+result.imgurl+'</code></div>');
                }else{
                    layer.msg('第'+j+'个图片上传失败');
                }
                console.log(result);
            });
        }
    }
</script>
<script>
    $('.dropdown').dropdown({
        on : 'hover'
    });
    $('.send').click(function () {
        var url = $('input[name=img]').val();
        var content = $('#neiron').val();
       $.ajax({
           type:'get',
           url:'/insertContent',
           data:{
               "content":content,
               "imgUrl":url
           },success:function () {
               window.location.reload();
               alert("发布成功");
           }
       })
    });
</script>
<script  type="text/javascript">
    $('.dropdown').dropdown({
        on : 'hover'
    });
    var tororo = '/tororo/assets/tororo.model.json';
    // var hijiki = '/hijiki/assets/hijiki.model.json';

    function show(path) {
        config.model.jsonPath = path;
        L2Dwidget.init(config)
    }
    // 配置文件官方API: https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
    var config = {
        model: {
            jsonPath: '', // xxx.model.json 的路径
        },
        display: {
            superSample: 1, // 超采样等级
            width: 250, // canvas的宽度
            height: 300, // canvas的高度
            position: 'right', // 显示位置：左或右
            hOffset: 0, // canvas水平偏移
            vOffset: 0, // canvas垂直偏移
        },
        mobile: {
            show: true, // 是否在移动设备上显示
            scale: 1, // 移动设备上的缩放
            motion: true, // 移动设备是否开启重力感应
        },
        react: {
            opacityDefault: 1, // 默认透明度
            opacityOnHover: 1, // 鼠标移上透明度
        },
    }
    window.onload = function () {
        show(tororo);
    }
</script>
</body>
</html>